<html>
    <link rel="stylesheet" type="text/css" href="javascript/resources/css/ext-all.css"> </link>
    <script src="javascript/adapter/ext/ext-base.js" type="text/javascript" charset="utf-8"></script>
    <script src="javascript/ext-all.js" type="text/javascript" charset="utf-8"></script>
    <body>
        <script type="text/javascript">
            Ext.ns('com.alumno');
            com.alumno.Form1 = {
                init: function(){
                    //<-- COMBO -->
                    function onCicloBeforeSelect(combo, record, index){
                        var ciclo = record.get('idCiclo');
                        grid1.getStore().removeAll();
                        grid2.getStore().removeAll();
                        grid1.getStore().load({
                            params : {
                                idCiclo: ciclo
                            }
                        });
                    }

                    var ciclo=new Ext.form.ComboBox({
                        fieldLabel:'Ciclo',
                        name:'ciclo',
                        forceSelection:true,
                        emptyText:'Seleccione ciclo...',
                        triggerAction: 'all',
                        editable:false,
                        mode: 'local',
                        displayField:'name',
                        valueField: 'idCiclo',
                        store :new Ext.data.JsonStore({
                            url:'index.php/modulo/alu_ciclo',
                            root: 'data',
                            totalProperty: 'total',
                            fields: [
                                {name:'idCiclo', type: 'string'},
                                {name:'name', type: 'string'}
                            ]
                        }),
                        listeners:{
                            beforeselect :function (combo,record,index){
                                onCicloBeforeSelect(combo, record, index);
                            }
                        }
                    });
                    ciclo.getStore().load({params:{x:'x'}});



                    //<-- GRILLA 1 -->
                    var index = null;
                    function onRowClick(grid,rowIndex,e){
                        if(grid1.getSelectionModel().getCount() > 0){
                            index = grid.getStore().getAt(rowIndex).get('idCurso');
                            loadGrilla2();
                        }
                    };


                    var dataRecord = new Ext.data.Record.create([
                        {name:'idCurso', type:'int'},
                        {name:'codigoCurso', type:'int'},
                        {name:'nombreCurso', type: 'string'},
                        {name:'nota', type: 'float'},
                        {name:'final', type: 'float'}
                    ]);

                    var dataReader = new Ext.data.JsonReader({
                        root: 'data'
                    },
                    dataRecord
                );

                    var dataProxy = new Ext.data.HttpProxy({
                        url:'index.php/modulo/alu_grilla1',
                        method: 'POST'
                    });


                    var store = new Ext.data.GroupingStore({
                        proxy: dataProxy,
                        reader: dataReader
                    });

                    var grid1 = new Ext.grid.GridPanel({
                        name:'grilla1',
                        id:'grilla1',
                        width:300,
                        height:200,
                        store:store,
                        border:false,
                        columns: [
                            new Ext.grid.CheckboxSelectionModel({singleSelect : true}),
                            {id:'idCurso',dataIndex:'idCurso', hidden:true},
                            {header: 'Codigo Curso',width: 75,dataIndex: 'codigoCurso'},
                            {header: 'Curso.',width:75,dataIndex: 'nombreCurso'},
                            {header: 'Nota', width: 50,dataIndex: 'nota'},
                            {header: 'Final', width: 50,dataIndex: 'final'},
                        ],
                        stripeRows: true,
                        listeners:{
                            rowclick:function(grid,rowIndex,e){
                                onRowClick(grid,rowIndex,e);
                            }
                        }
                    });

                    var toolbar1= new Ext.Toolbar({
                        items: [
                            {
                                xtype : 'tbspacer',
                                width : 10
                            },
                            ciclo
                        ]
                    });


                    //<-- GRILLA 2 -->

                    //<-- METODOS GRILLA 2 -->
                    function loadGrilla2(){
                        grid2.getStore().load({
                            params:{
                                idCurso:index
                            }
                        });
                    }


                    var dataRecord2 = new Ext.data.Record.create([
                        {name:'idEvaluacion', type:'int'},
                        {name:'tipo',type:'string'},
                        {name:'peso', type:'int'},
                        {name:'nota', type:'float'}
                    ]);

                    var dataReader2 = new Ext.data.JsonReader({
                        root: 'data'
                    },
                    dataRecord2
                );

                    var dataProxy2 = new Ext.data.HttpProxy({
                        url:'index.php/modulo/adm_grilla2',
                        method: 'POST'
                    });


                    var store2 = new Ext.data.GroupingStore({
                        proxy: dataProxy2,
                        reader: dataReader2
                    });

                    var grid2 = new Ext.grid.GridPanel({
                        name:'grilla2',
                        id:'grilla2',
                        width:300,
                        height:200,
                        store:store2,
                        border:false,
                        columns: [
                            new Ext.grid.CheckboxSelectionModel({singleSelect : true}),
                            {id:'idEvaluacion',dataIndex:'idEvaluacion', hidden:true},
                            {header: 'Tipo Eval.',width: 75,dataIndex: 'tipo'},
                            {header: 'Peso',width: 75,dataIndex: 'peso'},
                            {header: 'Nota',width: 75,dataIndex: 'nota'}
                        ],
                        stripeRows: true

                    });

                    //< -- PANELES -->

                    var panelgrid1 = new Ext.Panel({
                        title:'Curso',
                        width:400,
                        height:200,
                        //border:false,
                        renderTo:'grilla1',
                        items:[
                            toolbar1,
                            grid1
                        ]
                    });
                    var panelgrid2 = new Ext.Panel({
                        title:'Tipo Evaluaci&oacute;n',
                        width:400,
                        height:200,
                        //border:false,
                        renderTo:'grilla2',
                        items:[
                            grid2
                        ]
                    });
                }
            }
            Ext.onReady(com.alumno.Form1.init,com.alumno.Form1);

        </script>



        <table>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="padding-left: 110px;"> <div id="grilla1"></div></td>
            </tr>
            <tr>
                <td> &nbsp; </td>
            </tr>
            <tr>
                <td style="padding-left: 110px;"> <div id="grilla2"></div></td>
            </tr>
        </table>

    </body>
</html>